<template>
  <j-modal
    :width="modalWidth"
    :visible="visible"
    :title="title"
    :wrapClassName="wrapClassNameInfo()"
    @ok="handleSubmit"
    @cancel="close"
    cancelText="关闭"
    style="top:5%;height: 90%;overflow-y: hidden">
    <div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <!-- 搜索区域 -->
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                               :treeData="categoryTree" v-model="queryParam.categoryId" placeholder="请选择类别">
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input ref="queryParamBomParam" placeholder="请输入条码、名称、规格、型号查询"
                         v-model="queryParam.bomParam"></a-input>
              </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                </a-col>
              </span>
          </a-row>
        </a-form>
      </div>
      <!-- 操作按钮区域 -->
      <div class="table-operator" style="margin-top: 5px">
        <a-popover trigger="click" placement="right">
          <template slot="content">
            <a-checkbox-group @change="onColChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row style="width: 500px">
                <template v-for="(item,index) in defColumns">
                  <template>
                    <a-col :span="8">
                      <a-checkbox :value="item.dataIndex">
                        <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                      </a-checkbox>
                    </a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </template>
          <a-button icon="setting">列设置</a-button>
        </a-popover>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :scroll="scroll"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
          :customRow="rowAction"
          @change="handleTableChange">

          <template slot="customBarCode" slot-scope="text, record">
            {{record.barCode}}
          </template>
        </a-table>
      </div>
      <!-- table区域-end -->
      <!-- 表单区域 -->
    </div>
  </j-modal>
</template>
<script>
  import {queryMaterialCategoryTreeList} from '@/api/api'
  import {filterObj} from '@/utils/util'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JDate from '@/components/jeecg/JDate'
  import Vue from 'vue'
  import JEllipsis from "@/components/jeecg/JEllipsis";

  export default {
    name: "SelectBomModal",
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      JEllipsis,
      JDate
    },
    props: ['rows', 'multi', 'barCode'],
    data () {
      return {
        title: '选择Bom',
        modalWidth: 1450,
        addBomModel: {
          materials: []
        },
        categoryTree: [],
        mPropertyListShort: '',
        model: {},
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 18,
          offset: 1
        },
        // 查询条件
        queryParam: {
          categoryId: '',
          bomParam: ''
        },
        ipagination: {
          pageSizeOptions: ['10', '20', '30', '100', '200']
        },
        // 实际表头
        columns: [],
        // 初始化设置的表头
        settingColumns: ['barCode', 'name', 'standard', 'model', 'categoryName', 'unit'],
        // 默认的列
        defColumns: [
          {title: '条码', dataIndex: 'barCode', width: 160, scopedSlots: {customRender: 'customBarCode'}},
          {title: '名称', dataIndex: 'name', width: 160, scopedSlots: {customRender: 'customName'}},
          {title: '规格', dataIndex: 'standard', width: 120},
          {title: '型号', dataIndex: 'model', width: 120},
          {title: '类别', dataIndex: 'categoryName', width: 80},
          {title: '单位', dataIndex: 'unit', width: 80}
        ],
        url: {
          list: "/bom/find",
        }
      }
    },
    created () {
      this.model = Object.assign({}, {});
      this.initColumnsSetting()
      this.loadTreeData();
    },
    watch: {
      barCode: {
        immediate: true,
        handler () {
          this.initBarCode()
        }
      },
    },
    computed: {
      // 计算属性的 getter
      getType: function () {
        return this.multi == true ? 'checkbox' : 'radio';
      }
    },
    methods: {
      initBarCode () {
        if (this.barCode) {
          this.$emit('initComp', this.barCode)
        } else {
          // JSelectUserByDep组件bug issues/I16634
          this.$emit('initComp', '')
        }
      },
      showModal (barCode, title) {
        this.visible = true;
        this.title = title || '选择商品'
        this.queryParam.bomParam = barCode
        this.$nextTick(() => this.$refs.queryParamBomParam.focus());
        this.loadTreeData();
      },
      close () {
        this.searchReset(0);
        this.visible = false;
      },
      getQueryParams () {
        //获取查询条件
        let sqp = {}
        if (this.superQueryParams) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        let searchObj = Object.assign({}, this.queryParam);
        var param = Object.assign(sqp, searchObj, this.isorter, this.filters);
        // param.field = this.getQueryField();
        param.current = this.ipagination.current;
        param.size = this.ipagination.pageSize;
        return filterObj(param);
      },
      //加载初始化列
      initColumnsSetting () {
        let columnsStr = Vue.ls.get('bomColumns')
        if (columnsStr && columnsStr.indexOf(',') > -1) {
          this.settingColumns = columnsStr.split(',')
        }
        this.columns = this.defColumns.filter(item => {
          if (this.settingColumns.includes(item.dataIndex)) {
            return true
          }
          return false
        })
      },
      //列设置更改事件
      onColChange (checkedValues) {
        this.columns = this.defColumns.filter(item => {
          if (checkedValues.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        let columnsStr = checkedValues.join()
        Vue.ls.set('bomColumns', columnsStr)
      },
      onSelectChange (selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
      },
      loadTreeData () {
        let that = this;
        let params = {};
        params.id = '';
        queryMaterialCategoryTreeList(params).then((res) => {
          if (res) {
            that.categoryTree = [];
            for (let i = 0; i < res.length; i++) {
              let temp = res[i];
              that.categoryTree.push(temp);
            }
          }
        })
      },
      searchReset () {
        this.loadData(1);
      },
      rowAction (record, index) {
        return {
          on: {
            dblclick: () => {
              this.onSelectChange(new Array(record.id), new Array(record));
              this.handleSubmit()
            }
          }
        }
      },
      handleSubmit () {
        let that = this;
        that.$emit('ok', that.selectionRows, that.selectedRowKeys);
        that.searchReset(0)
        that.close();
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>